<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="container"></div>

  <script>
    const container = document.getElementById("container");

    // 1、记录加载到的位置
    let index = 0

    // 2、每次加载 500 条数据，一共加载 50w 条数据，一共加载 1000 次
    // 封装一个加载数据的函数
    function loadData() {
      // 当 index 计数器大于了 50w，那么说明数据加载完毕，就不在进行页面的渲染
      if (index >= 500000) return

      // 使用 for 循环每次加载 500 条数据
      for (let i = 0; i < 500; i++) {
        const div = document.createElement('div')
        div.innerHTML = i + index
        container.appendChild(div)
      }

      // 让计数器 index + 500
      index += 500

      // 讲下一次递归调用，放在下一个宏任务中去执行
      setTimeout(loadData, 0)
    }

    // 调用加载数据的函数
    console.time('分片加载')
    loadData()
    setTimeout(() => {
      console.timeEnd('分片加载')
    }, 0);
  </script>
</body>

</html>